<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
        button { padding: 10px 15px; margin: 5px; cursor: pointer; }
        .result { margin: 10px 0; padding: 10px; background: #f5f5f5; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h1>智能对话助手 - 功能测试</h1>
    
    <div class="test-section">
        <h3>1. 基础连接测试</h3>
        <button onclick="testConnection()">测试服务器连接</button>
        <div id="connectionResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 聊天API测试</h3>
        <button onclick="testChat()">测试普通聊天</button>
        <button onclick="testTimeQuery()">测试时间查询</button>
        <button onclick="testCalculation()">测试数学计算</button>
        <div id="chatResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. WebSocket测试</h3>
        <button onclick="testWebSocket()">测试WebSocket连接</button>
        <div id="wsResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 前端组件测试</h3>
        <button onclick="testFrontend()">测试前端JavaScript</button>
        <div id="frontendResult" class="result"></div>
    </div>

    <script>
        const sessionId = 'test-' + Date.now();
        
        async function testConnection() {
            const result = document.getElementById('connectionResult');
            try {
                const response = await fetch('/');
                if (response.ok) {
                    result.innerHTML = '<span class="success">✅ 服务器连接正常</span>';
                } else {
                    result.innerHTML = '<span class="error">❌ 服务器响应异常: ' + response.status + '</span>';
                }
            } catch (error) {
                result.innerHTML = '<span class="error">❌ 连接失败: ' + error.message + '</span>';
            }
        }
        
        async function testChat() {
            const result = document.getElementById('chatResult');
            result.innerHTML = '测试中...';
            
            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        sessionId: sessionId,
                        message: '你好'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    result.innerHTML = '<span class="success">✅ 聊天API正常</span><br>响应: ' + data.content.substring(0, 100) + '...';
                } else {
                    result.innerHTML = '<span class="error">❌ 聊天API失败: ' + response.status + '</span>';
                }
            } catch (error) {
                result.innerHTML = '<span class="error">❌ 聊天API错误: ' + error.message + '</span>';
            }
        }
        
        async function testTimeQuery() {
            const result = document.getElementById('chatResult');
            result.innerHTML = '测试时间查询...';
            
            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        sessionId: sessionId,
                        message: '现在北京时间是几点？'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.content.includes('北京') || data.content.includes('时间')) {
                        result.innerHTML = '<span class="success">✅ 时间查询功能正常</span><br>响应: ' + data.content;
                    } else {
                        result.innerHTML = '<span class="error">❌ 时间查询功能异常</span><br>响应: ' + data.content;
                    }
                } else {
                    result.innerHTML = '<span class="error">❌ 时间查询失败: ' + response.status + '</span>';
                }
            } catch (error) {
                result.innerHTML = '<span class="error">❌ 时间查询错误: ' + error.message + '</span>';
            }
        }
        
        async function testCalculation() {
            const result = document.getElementById('chatResult');
            result.innerHTML = '测试数学计算...';
            
            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        sessionId: sessionId,
                        message: '计算 10 + 20'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.content.includes('30') || data.content.includes('=')) {
                        result.innerHTML = '<span class="success">✅ 计算功能正常</span><br>响应: ' + data.content;
                    } else {
                        result.innerHTML = '<span class="error">❌ 计算功能异常</span><br>响应: ' + data.content;
                    }
                } else {
                    result.innerHTML = '<span class="error">❌ 计算测试失败: ' + response.status + '</span>';
                }
            } catch (error) {
                result.innerHTML = '<span class="error">❌ 计算测试错误: ' + error.message + '</span>';
            }
        }
        
        function testWebSocket() {
            const result = document.getElementById('wsResult');
            result.innerHTML = '测试WebSocket连接...';
            
            try {
                const ws = new WebSocket(`ws://${window.location.host}/api/ws/${sessionId}`);
                
                ws.onopen = function() {
                    result.innerHTML = '<span class="success">✅ WebSocket连接成功</span>';
                    ws.close();
                };
                
                ws.onerror = function(error) {
                    result.innerHTML = '<span class="error">❌ WebSocket连接失败: ' + error + '</span>';
                };
                
                ws.onclose = function() {
                    if (result.innerHTML.includes('成功')) {
                        result.innerHTML += '<br>连接已正常关闭';
                    }
                };
                
                // 超时处理
                setTimeout(() => {
                    if (ws.readyState === WebSocket.CONNECTING) {
                        ws.close();
                        result.innerHTML = '<span class="error">❌ WebSocket连接超时</span>';
                    }
                }, 5000);
                
            } catch (error) {
                result.innerHTML = '<span class="error">❌ WebSocket测试错误: ' + error.message + '</span>';
            }
        }
        
        function testFrontend() {
            const result = document.getElementById('frontendResult');
            
            // 测试基本JavaScript功能
            const tests = [
                { name: 'fetch API', test: () => typeof fetch !== 'undefined' },
                { name: 'WebSocket API', test: () => typeof WebSocket !== 'undefined' },
                { name: 'JSON支持', test: () => typeof JSON !== 'undefined' },
                { name: 'Promise支持', test: () => typeof Promise !== 'undefined' },
                { name: 'DOM操作', test: () => typeof document.getElementById !== 'undefined' }
            ];
            
            let results = [];
            tests.forEach(test => {
                try {
                    if (test.test()) {
                        results.push(`<span class="success">✅ ${test.name}</span>`);
                    } else {
                        results.push(`<span class="error">❌ ${test.name}</span>`);
                    }
                } catch (error) {
                    results.push(`<span class="error">❌ ${test.name}: ${error.message}</span>`);
                }
            });
            
            result.innerHTML = results.join('<br>');
        }
        
        // 页面加载完成后自动运行基础测试
        window.addEventListener('load', function() {
            console.log('测试页面加载完成');
            testConnection();
            testFrontend();
        });
    </script>
</body>
</html>
